(function() {

		
	findData()
	
})();




function findData(){

	$.ajax({
		cache:false,
		dataType : "json", //返回的数据是json 格式
		type : "post",
		url : "../ksh/showAreaKsh",
		data : {
			"id" :"",
			"types" : ""
		},
		success : function(data) {
			echartsMap("../static/ksh/json/Shanghai.json",'../static/ksh/json/baoshanqu.json','../static/ksh/json/baoshanqu.json','宝山','宝山',data);
			
			  
		}
	});
	

	
}


function echartsMap2(province1,province2,province3,city,area) {
	let option = {
		visualMap: {
     
          	inRange: {
            	color: ['#2B91B7', '#2B91B7']
          	},
          	show:false
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        series: [{
        	type: 'map',
        	//这里的“map”值需要与下面的“echarts.registerMap”值对应
          	map: 'guangdong',
          	zoom: 1.15,
          	roam: false,
        	label: {
            	normal: {
              		show: true,
              		 color: "#fff"
            	},
	             emphasis: {
			          show: true,
			          color: "#fff"
			        }
          	},
          	layoutSize: '80%',
     
        	itemStyle: {
	      		normal: {
			          areaColor: "rgba(43, 196, 243, 0.42)",
			          borderColor: "rgba(43, 196, 243, 1)",
			          borderWidth: 1,
			     
			    	label: {
	              		show: true
	              	}
	
			        },
		        emphasis: {
		          areaColor: "#2B91B7"
		          
		        }
          	},
          	//需要在地图上显示的数据（案例只写省会，其它城市按格式复制粘贴就好）
          	data: [{name:"宝山", value: 20057}],
          	nameMap: {}
        }]
	};
	//引入你需要绘画的地图json
	$.get(province1, function(geoJson) {
		//这里的“guangdong”需要与上面的“map”值对应
		echarts.registerMap('guangdong', geoJson);
		let myEcharts = echarts.init(document.getElementById("echartsMap"));
		myEcharts.setOption(option);
		window.addEventListener('resize', () => {
			myEcharts.resize();
		});
		echartsCity (province2,province3,area);
	});
};


function echartsMap (province1,province2,province3,city,area,lists) {
	
	

	var dataList=[
		    {name:"徐汇",value:0},
		    {name: '宝山', value: Math.round(Math.random()*1000)},
		    {name: '长宁', value: Math.round(Math.random()*1000)},
		    {name:"嘉定",value:0},
		    {name: '闵行', value: Math.round(Math.random()*1000)},
		    {name: '杨浦', value: Math.round(Math.random()*1000)},
		    {name:"静安",value:0},
		    {name: '青浦', value: Math.round(Math.random()*1000)},
		    {name: '浦东', value: Math.round(Math.random()*1000)},
		    {name:"徐汇",value:0},
		    {name: '金山', value: Math.round(Math.random()*1000)},
		    {name: '松江', value: Math.round(Math.random()*1000)},
		    {name:"崇明",value:0},
		    {name: '虹口', value: Math.round(Math.random()*1000)},
		    {name: '普陀', value: Math.round(Math.random()*1000)},
		    {name: '黄浦', value: Math.round(Math.random()*1000)},
		    {name: '奉贤', value: Math.round(Math.random()*1000)}
	    ];
	
	
	let option = {
        tooltip: {
        	 formatter:function(params,ticket, callback){
                 return params.name+'：'+params.value
             }
        },
        series: [{
        	type: 'map',
        	//这里的“map”值需要与下面的“echarts.registerMap”值对应
          	map: 'shanghai',
          	zoom: 1.15,
          	roam: false,
          	label: {
            	normal: {
              		show: true,
              		 color: "#fff"
            	},
	             emphasis: {
			          show: true,
			          color: "#fff"
			        }
          	},
          	layoutSize: '80%',
          	itemStyle: {
	      		normal: {
			          areaColor: "rgba(43, 196, 243, 0.42)",
			          borderColor: "rgba(43, 196, 243, 1)",
			          borderWidth: 1
	
			        },
		        emphasis: {
		          areaColor: "#2B91B7"
		          
		        }
          	},
          	//需要在地图上显示的数据（案例只写省会，其它城市按格式复制粘贴就好）
          	data: lists,
          	nameMap: {}
        }]
	};
	//引入你需要绘画的地图json
	$.get(province1, function(geoJson) {
		//这里的“guangdong”需要与上面的“map”值对应
		echarts.registerMap('shanghai', geoJson);
		let myEcharts = echarts.init(document.getElementById("echartsMap"));
		
		
		myEcharts.on('click', function (params) {
			if(params.name=="浦东"){
				$("#quname").text(params.name+"新区");
			}else{
				$("#quname").text(params.name+"区");
			}
			
			$("#qunums").text(params.value)
	     });
		
		myEcharts.setOption(option);
		
		window.addEventListener('resize', () => {
			myEcharts.resize();
		});
		
		
	 
		
	});
};

//市
function echartsCity (province2,province3,area) {
	let option = {
		visualMap: {
			min: 0,
          	max: 1000,
          	right: '3%',
          	text: ['High', 'Low'],
          	realtime: false,
          	calculable: true,
          	inRange: {
            	color: ['lightskyblue', 'yellow', 'orangered']
          	}
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        series: [{
        	type: 'map',
        	//这里的“map”值需要与下面的“echarts.registerMap”值对应
          	map: 'guangzhoushi',
          	zoom: 1.28,
          	roam: false,
          	label: {
            	normal: {
              		show: true
            	},
	            emphasis: {
	              	show: true
	            }
          	},
          	layoutSize: '80%',
          	itemStyle: {
	            normal: {
	            	areaColor: "#8ED1EB",//改变地图里面的颜色
	              	color:"#FFF",
	              	label: {
	              		show: true
	              	}
	            },
          	},
          	//需要在地图上显示的数据（案例只写省会，其它城市按格式复制粘贴就好）
          	data: [{name: area, value: 20057},],
          	nameMap: {}
        }]
	};
	//引入你需要绘画的地图json
	$.get(province2, function(geoJson) {
		//这里的“guangdong”需要与上面的“map”值对应
		echarts.registerMap('guangzhoushi', geoJson);
		let myEcharts = echarts.init(document.getElementById("echartsCity"));
		myEcharts.setOption(option);
		window.addEventListener('resize', () => {
			myEcharts.resize();
		});
		echartsArea (province3,area);
	});
};

//区
function echartsArea (province3,area) {
	let option = {
		visualMap: {
			min: 0,
          	max: 1000,
          	right: '3%',
          	text: ['High', 'Low'],
          	realtime: false,
          	calculable: true,
          	inRange: {
            	color: ['lightskyblue', 'yellow', 'orangered']
          	}
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        series: [{
        	type: 'map',
        	//这里的“map”值需要与下面的“echarts.registerMap”值对应
          	map: 'tianhequ',
          	zoom: 1.28,
          	roam: false,
          	label: {
            	normal: {
              		show: true
            	},
	            emphasis: {
	              	show: true
	            }
          	},
          	layoutSize: '80%',
          	itemStyle: {
	            normal: {
	            	areaColor: "#8ED1EB",//改变地图里面的颜色
	              	color:"#FFF",
	              	label: {
	              		show: true
	              	}
	            },
          	},
          	//需要在地图上显示的数据（案例只写省会，其它城市按格式复制粘贴就好）
          	data: [{name: area, value: 20057},],
          	nameMap: {}
        }]
	};
	//引入你需要绘画的地图json
	$.get(province3, function(geoJson) {
		//这里的“guangdong”需要与上面的“map”值对应
		echarts.registerMap('tianhequ', geoJson);
		let myEcharts = echarts.init(document.getElementById("echartsArea"));
		myEcharts.setOption(option);
		window.addEventListener('resize', () => {
			myEcharts.resize();
		});
	});
};
